<template>
	<view>
		<view class="cont"></view>
		<view class="margin bg-fff">
			<view class="text-center" @click="handleUser">
				<image class="avactar" src="http://lc-UOGxPwQC.cn-n1.lcfile.com/i0cMrSP8h9BmA3fjiC9ocX1NHrxdbrBg/logo.png" mode=""></image>
			</view>
			<view class="fs-28 text-center">
				{{username}}
			</view>
			<view class="flex grid">
				<view class="flex flex-direction align-center padding" v-for="(item,index) in gridArrOne">
					<text :class="['iconfont margin-bottom-xs', item.icon]"></text>
					{{item.name}}
				</view>
				<view class="flex flex-direction align-center padding" v-for="(item,index) in gridArrTwo">
					<text :class="['iconfont margin-bottom-xs', item.icon]"></text>
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gridArrOne:[
					{
						icon: 'icon-danju',
						name: '我的订单'
					},
					{
						icon: 'icon-fukuan',
						name: '待付款'
					},
					{
						icon: 'icon-daishouhuo',
						name: '待收货'
					},
					{
						icon: 'icon-vip-fill',
						name: '会员等级'
					}
				],
				gridArrTwo:[
					{
						icon: 'icon-jifen',
						name: '积分积分'
					},
					{
						icon: 'icon-yue',
						name: '余余额'
					},
					{
						icon: 'icon-youhuijuan',
						name: '优惠券'
					},
					{
						icon: 'icon-yinhangqia',
						name: '现现金卡'
					}
				]
			}
		},
		methods: {
			handleUser() {
				uni.navigateTo({
					url: '../user/login'
				})
			}
		},
		computed: {
			username() {
				let {userInfo} = this.$store.state.user
				let name = userInfo ? userInfo.username : '尚未登录'
				return name
			}
		}
	}
</script>

<style lang="scss">
.cont {
	background-color: #f6f6f6;
	height: 400upx;
}
.grid {
	.iconfont {
		font-size: 60upx;
		color: #888888;
	}
}
.avactar {
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
	margin-top: -50upx;
}
.margin.bg-fff {
	margin-top: -200upx;
}
</style>
